* {
  margin: 0px;
  padding: 0px;
  box-sizing: border;
  overflow: hidden;
}
div {
  border-radius: 50%;
}

.level1 {
  border: 1px solid rgb(102, 0, 204);
  width: 400px;
  height: 400px;
  background: rgb(102, 0, 204);
}
.level2 {
  border: 1px solid rgb(51, 51, 204);
  width: 360px;
  height: 360px;
  background: rgb(51, 51, 204);
  margin: 20px;
}
.level3 {
  border: 1px solid rgb(0, 255, 255);
  width: 320px;
  height: 320px;
  background: rgb(0, 255, 255);
  margin: 20px;
}
.level4 {
  border: 1px solid rgb(0, 255, 0);
  width: 280px;
  height: 280px;
  background: rgb(0, 255, 0);
  margin: 20px;
}
.level5 {
  border: 1px solid rgb(255, 255, 102);
  width: 240px;
  height: 240px;
  background: rgb(255, 255, 102);
  margin: 20px;
}
.level6 {
  border: 1px solid rgb(255, 153, 0);
  width: 200px;
  height: 200px;
  background: rgb(255, 153, 0);
  margin: 20px;
}
.level7 {
  border: 1px solid rgb(255, 0, 0);
  width: 160px;
  height: 160px;
  background: rgb(255, 0, 0);
  margin: 20px;
}
.x {
  background: white;
}
